<template>
    <div>
        <gift-popup
            ref="giftPopupRef"
            v-if="isSelectionDialogVisible"
            @success="handleItemSelect"
            @close="isSelectionDialogVisible = false"
        ></gift-popup>
        <!-- 3. 放置模式遮罩层 (选择后、确认前显示) -->
        <div
            v-if="isPlacementModeActive"
            class="placement-overlay"
            @click="handleOverlayClick"
        ></div>

        <!-- 4. 可拖拽的已放置物品 (选择后、确认前显示) -->
        <div
            v-if="isPlacementModeActive && selectedItem"
            ref="draggableItemRef"
            class="draggable-item"
            :class="{ dragging: dragging }"
            :style="itemStyle"
            @mousedown.prevent="handleDragStart"
            @touchstart.prevent="handleDragStart"
        >
            <!-- 占位符：替换为实际图片 -->
            <img
                v-if="selectedItem.cover"
                :src="selectedItem.cover"
                :alt="selectedItem.cover"
                class="item-actual-image draggable-image"
            />
            <span v-else> {{ selectedItem.name }}</span>
            <!-- 可选：添加拖拽时的视觉提示，例如边框 -->
            <div class="drag-handle-indicator"></div>
        </div>

        <!-- 5. 确认对话框 (基于图3) -->
        <el-dialog
            v-model="isConfirmationDialogVisible"
            title="祭奠确认"
            width="450px"
            :modal="true"
            :close-on-click-modal="false"
            @closed="resetPlacementState"
            custom-class="confirmation-dialog"
        >
            <el-input
                v-model="confirmationMessage"
                type="textarea"
                :rows="3"
                placeholder="输入祭奠寄语 (可选)"
                class="confirmation-message"
            />
            <div class="cost-info">
                本次敬献需要 {{ selectedItem?.price ?? 0 }} 永恒币，扣除方式：
            </div>
            <el-radio-group v-model="paymentMethod" class="payment-options">
                <div class="payment-option">
                    <el-radio label="user_account">用户永恒币</el-radio>
                    <span class="account-balance">可用 {{ userBalance }}</span>
                </div>
                <div class="payment-option">
                    <!-- 假设公共账户不可用 -->
                    <el-radio label="public_account" disabled>本馆公共账户</el-radio>
                    <span class="account-balance">可用 {{ publicBalance }}</span>
                </div>
            </el-radio-group>

            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" @click="confirmPlacement">确认敬献</el-button>
                    <el-button @click="cancelPlacement">取消本次敬献</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import {
    ref,
    reactive,
    computed,
    onBeforeUnmount,
    watch,
    nextTick,
    defineProps,
    defineExpose,
    shallowRef,
	toRaw
} from 'vue'
import {
    ElDialog,
    ElButton,
    ElScrollbar,
    ElRow,
    ElCol,
    ElIcon,
    ElInput,
    ElRadioGroup,
    ElRadio
} from 'element-plus'
import { Clock } from '@element-plus/icons-vue'
import type { CSSProperties } from 'vue' // 明确导入 CSSProperties 类型
import { apiMuGiftCate, apiMuGiftList, apiMuGiftAdd } from '@/api/gift'
import GiftPopup from './giftPopup.vue'
const giftPopupRef = shallowRef<InstanceType<typeof GiftPopup>>()

// --- 类型定义 ---
interface ShopItem {
    id: number
    name: string
    price: number
    expire_time: number
    cover?: string // 物品图片 URL (可选)
}

// --- Props (如果需要从父组件传入数据，可以在这里定义) ---
const props = defineProps({
	giftCateList: {
		type: Array,
		default: () => []
	}
});

// --- Emits (用于通知父组件发生了什么) ---
const emit = defineEmits(['placementConfirmed', 'placementCancelled'])

// --- 状态变量 ---

// 对话框可见性
const isSelectionDialogVisible = ref(false) // 选择对话框
const isConfirmationDialogVisible = ref(false) // 确认对话框

// 放置模式状态
const isPlacementModeActive = ref(false) // 是否处于放置模式 (显示遮罩和可拖拽物品)
const selectedItem = ref<ShopItem | null>(null) // 当前选中的物品

// 可拖拽物品状态
const draggableItemRef = ref<HTMLElement | null>(null) // 对可拖拽元素的引用
const itemPosition = reactive({ x: 0, y: 0 }) // 物品的屏幕坐标 (左上角)
const dragging = ref(false) // 是否正在拖拽
const dragStartOffset = reactive({ x: 0, y: 0 }) // 拖拽开始时，鼠标/触摸点相对于物品左上角的偏移

// 确认对话框状态
const confirmationMessage = ref('') // 祭奠寄语
const paymentMethod = ref('user_account') // 默认支付方式
const userBalance = ref(500) // 示例用户余额
const publicBalance = ref(250) // 示例公共账户余额

// --- 可用物品列表 (示例数据) ---

// --- 计算属性 ---
// 计算可拖拽物品的样式
const itemStyle = computed((): CSSProperties => {
    // 确保 position 是有效的 CSS 定位值
    const positionValue: CSSProperties['position'] = 'absolute'
    return {
        position: positionValue,
        left: `${itemPosition.x}px`,
        top: `${itemPosition.y}px`,
        zIndex: 1001, // 确保物品在遮罩层之上
        cursor: dragging.value ? 'grabbing' : 'grab', // 拖拽时改变鼠标样式
        userSelect: 'none' // 防止拖动时选中文本
    }
})

// --- 方法 ---

// 打开物品选择对话框
const openSelectionDialog = () => {
    isSelectionDialogVisible.value = true
}

// 处理选择对话框关闭事件 (用于重置状态)
const handleSelectionDialogClosed = () => {
    // 如果选择对话框关闭时并没有选择任何物品，确保退出放置模式
    if (!selectedItem.value) {
        isPlacementModeActive.value = false
    }
}

// 处理物品选择
const handleItemSelect = async (item: any) => {
	console.log(toRaw(item), item)
    selectedItem.value = item // 记录选中的物品
    isSelectionDialogVisible.value = false // 关闭选择对话框

    // 等待对话框关闭动画完成且DOM更新
    await nextTick()

    // 设置物品的初始位置 (例如，屏幕中央，可根据需要调整)
    // 减去物品宽度/高度的一半来居中
    const itemWidth = draggableItemRef.value?.offsetWidth ?? 100 // 获取实际宽度或用默认值
    const itemHeight = draggableItemRef.value?.offsetHeight ?? 100
    itemPosition.x = window.innerWidth / 2 - itemWidth / 2
    itemPosition.y = window.innerHeight / 2 - itemHeight / 2

    isPlacementModeActive.value = true // 激活放置模式 (显示遮罩和物品)
}

// --- 拖拽处理 ---

// 辅助函数：从鼠标或触摸事件中获取坐标
const getEventCoordinates = (
    event: MouseEvent | TouchEvent
): { clientX: number; clientY: number } => {
    if (event instanceof MouseEvent) {
        // 鼠标事件
        return { clientX: event.clientX, clientY: event.clientY }
    } else {
        // 触摸事件 (取第一个触摸点)
        return { clientX: event.touches[0].clientX, clientY: event.touches[0].clientY }
    }
}

//   // 处理拖拽开始 (鼠标按下或触摸开始)
//   const handleDragStart = (event: MouseEvent | TouchEvent) => {
//     if (!draggableItemRef.value) return; // 确保元素存在

//     dragging.value = true; // 标记开始拖拽
//     const coords = getEventCoordinates(event); // 获取事件坐标
//     const rect = draggableItemRef.value.getBoundingClientRect(); // 获取元素位置和尺寸

//     // 计算鼠标/触摸点相对于元素左上角的偏移量
//     dragStartOffset.x = coords.clientX - rect.left;
//     dragStartOffset.y = coords.clientY - rect.top;

//     // 在 document 上添加全局监听器来处理移动和结束事件
//     document.addEventListener('mousemove', handleDragging);
//     document.addEventListener('mouseup', handleDragEnd);
//     // 对于触摸事件，使用 passive: false 阻止页面滚动
//     document.addEventListener('touchmove', handleDragging, { passive: false });
//     document.addEventListener('touchend', handleDragEnd);
//   };

//   // 处理拖拽过程 (鼠标移动或触摸移动)
//   const handleDragging = (event: MouseEvent | TouchEvent) => {
//       if (!dragging.value) return; // 仅在拖拽状态下处理
//       event.preventDefault(); // 阻止默认行为 (如文本选择、页面滚动)

//       const coords = getEventCoordinates(event); // 获取当前坐标
//       // 根据当前坐标和初始偏移量计算新的左上角位置
//       itemPosition.x = coords.clientX - dragStartOffset.x;
//       itemPosition.y = coords.clientY - dragStartOffset.y;
//   };

// --- 新增或修改：用于存储元素尺寸的一半 ---
// 我们可以复用 dragStartOffset，或者创建一个新的 reactive 对象
// 为了清晰，我们假设 dragStartOffset 现在存储的是中心偏移
// const dragStartOffset = reactive({ x: 0, y: 0 }); // 保持不变

// 处理拖拽开始 (鼠标按下或触摸开始)
const handleDragStart = (event: MouseEvent | TouchEvent) => {
    console.log('开始拖拽')
    const element = draggableItemRef.value // 获取元素引用
    if (!element) return // 确保元素存在

    dragging.value = true // 标记开始拖拽

    // --- 修改点：计算中心点偏移 ---
    const elementWidth = element.offsetWidth // 获取元素的实际渲染宽度
    const elementHeight = element.offsetHeight // 获取元素的实际渲染高度

    // 将偏移量设置为元素宽度/高度的一半
    // 这代表了从元素左上角到元素中心的距离
    dragStartOffset.x = elementWidth / 2
    dragStartOffset.y = elementHeight / 2
    // --- 修改结束 ---

    // 在 document 上添加全局监听器
    document.addEventListener('mousemove', handleDragging)
    document.addEventListener('mouseup', handleDragEnd)
    document.addEventListener('touchmove', handleDragging, { passive: false })
    document.addEventListener('touchend', handleDragEnd)

    // 可选：立即执行一次 handleDragging，使元素中心立即吸附到鼠标位置
    // 这可以防止因事件处理延迟导致的初始微小跳动
    handleDragging(event)
}

// 处理拖拽过程 (鼠标移动或触摸移动)
const handleDragging = (event: MouseEvent | TouchEvent) => {
    console.log('拖拽中')
    if (!dragging.value) return // 仅在拖拽状态下处理
    event.preventDefault() // 阻止默认行为

    const coords = getEventCoordinates(event) // 获取当前鼠标/触摸点坐标
    console.log('当前鼠标/触摸点坐标', coords, dragStartOffset)
    // --- 修改点：计算新的左上角位置，使中心对齐鼠标 ---
    // 新的左上角X = 当前鼠标X - 中心点横向偏移 (宽度/2)
    itemPosition.x = coords.clientX
    // 新的左上角Y = 当前鼠标Y - 中心点纵向偏移 (高度/2)
    itemPosition.y = coords.clientY
    // --- 修改结束 ---
}

// 处理拖拽结束 (鼠标松开或触摸结束)
const handleDragEnd = () => {
    if (!dragging.value) return // 仅在拖拽状态下处理

    dragging.value = false // 标记结束拖拽

    // 移除在 document 上添加的全局监听器
    document.removeEventListener('mousemove', handleDragging)
    document.removeEventListener('mouseup', handleDragEnd)
    document.removeEventListener('touchmove', handleDragging)
    document.removeEventListener('touchend', handleDragEnd)

    // --- 关键点：拖拽结束后打开确认对话框 ---
    isConfirmationDialogVisible.value = true
}

// --- 处理遮罩层点击 ---
const handleOverlayClick = () => {
    // 只有在非拖拽状态下点击遮罩层才触发确认
    if (!dragging.value) {
        isConfirmationDialogVisible.value = true
    }
}

// --- 确认对话框逻辑 ---

// 确认放置
const confirmPlacement = () => {
    // 在这里可以处理实际的业务逻辑，例如发送请求到服务器
    console.log('确认敬献:', {
        item: selectedItem.value, // 选中的物品信息
        position: { ...itemPosition }, // 最终放置的位置
        message: confirmationMessage.value, // 用户输入的寄语
        payment: paymentMethod.value // 选择的支付方式
    })

    // 通知父组件放置已确认，并传递相关数据
    emit('placementConfirmed', {
        item: selectedItem.value,
        position: { x: itemPosition.x, y: itemPosition.y },
        message: confirmationMessage.value,
        paymentMethod: paymentMethod.value
    })

    isConfirmationDialogVisible.value = false // 关闭确认对话框
    // 状态重置将在 @closed 事件处理函数中进行
}

// 取消放置
const cancelPlacement = () => {
    console.log('取消本次敬献')
    // 通知父组件放置已取消
    emit('placementCancelled')
    isConfirmationDialogVisible.value = false // 关闭确认对话框
    // 状态重置将在 @closed 事件处理函数中进行
}

// 重置放置状态 (在确认对话框关闭后调用)
const resetPlacementState = () => {
    isPlacementModeActive.value = false // 退出放置模式
    selectedItem.value = null // 清空选中的物品
    dragging.value = false // 重置拖拽状态
    confirmationMessage.value = '' // 清空寄语
    paymentMethod.value = 'user_account' // 重置支付方式
    // 可选：是否重置物品位置到初始状态？根据需求决定
    // itemPosition.x = 0;
    // itemPosition.y = 0;
}

// --- 清理工作 ---
// 确保在组件卸载时移除可能存在的全局事件监听器 (以防万一在拖拽过程中组件被卸载)
onBeforeUnmount(() => {
    if (dragging.value) {
        document.removeEventListener('mousemove', handleDragging)
        document.removeEventListener('mouseup', handleDragEnd)
        document.removeEventListener('touchmove', handleDragging)
        document.removeEventListener('touchend', handleDragEnd)
    }
})

// 监听选择对话框关闭事件，确保如果用户没选物品就关闭了，能正确重置状态
watch(isSelectionDialogVisible, (newValue, oldValue) => {
    // 从 true 变为 false，并且没有选中物品
    if (oldValue && !newValue && !selectedItem.value) {
        resetPlacementState() // 清理状态
    }
})

// 数据
const giftList = ref([])
const getpiMuGiftList = async () => {
    let data = props.giftCateList.find((item) => item.name == '献花') as any
    const res = await apiMuGiftList({ cid: data.id })
    console.log(res)
    giftList.value = res
}
const open = async () => {
    await getpiMuGiftList()
    console.log('打开物品选择对话框', props.giftCateList,)
    isSelectionDialogVisible.value = true
	await nextTick()
    giftPopupRef.value?.setFormData({
        giftCateList: props.giftCateList,
        giftList: giftList.value
    })
    giftPopupRef.value?.open('add')

	
}

defineExpose({ open })
</script>

<style scoped lang="scss">
/* --- 物品选择对话框样式 (部分来自之前的示例) --- */
.selection-dialog {
    .shop-content {
        padding: 0 15px 15px 15px;
    }
    .sub-filters {
        margin-bottom: 15px;
        display: flex;
        gap: 20px;
        padding-left: 5px;
    }
    .filter-item {
        font-size: 14px;
        color: #666;
        cursor: pointer;
        padding: 5px 0;
        &.active {
            color: #c0392b;
            font-weight: bold;
            border-bottom: 2px solid #c0392b;
        }
        &:hover {
            color: #c0392b;
        }
    }
    .item-grid {
        padding-right: 10px; /* 给滚动条留空间 */
    }
    .shop-item {
        text-align: center;
        margin-bottom: 15px;
        background-color: #fff;
        border: 1px solid #eee;
        border-radius: 3px;
        padding: 10px 5px 5px 5px;
        display: flex;
        flex-direction: column;
        align-items: center;
        height: 165px; // 稍微增加高度以容纳价格行
        box-sizing: border-box;
        cursor: pointer;
        transition: box-shadow 0.2s ease-in-out;
        &:hover {
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }
    }
    .item-image-placeholder {
        width: 80px;
        height: 80px;
        background-color: #f0f0f0;
        margin-bottom: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #ccc;
        font-size: 12px;
        overflow: hidden; // 确保图片不超出
    }
    .item-actual-image {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain; // 保持图片比例
    }
    .item-name {
        font-size: 13px;
        color: #333;
        margin: 5px 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 100%;
    }
    .item-price {
        font-size: 12px;
        color: #888;
        margin: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
        .free {
            color: #e67e22;
            font-weight: bold;
        }
        .el-icon {
            font-size: 12px;
            position: relative;
            top: 1px;
        }
    }
    .scroll-hint {
        text-align: center;
        font-size: 13px;
        color: #999;
        margin-top: 10px;
        padding-top: 10px;
        border-top: 1px solid #eee;
    }
}

/* --- 放置模式遮罩层样式 --- */
.placement-overlay {
    position: absolute; // 固定定位，覆盖整个视口
    top: 0;
    left: 0;
    width: 100vw;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); // 半透明黑色背景
    z-index: 1000; // 层级低于可拖拽物品和对话框
    cursor: pointer; // 提示可以点击
}

/* --- 可拖拽物品样式 --- */
.draggable-item {
    position: absolute; // 由 itemStyle 控制 left/top
    padding: 5px;
    // background-color: rgba(255, 255, 255, 0.8); // 轻微透明背景
    border: 1px dashed #aaa; // 虚线边框提示可拖拽
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    z-index: 1001; // 高于遮罩层
    display: flex; // 用于内部图片居中等
    align-items: center;
    justify-content: center;
    min-width: 80px; // 保证最小尺寸
    min-height: 80px;
    box-sizing: border-box;
	width: auto;
	height: auto;
    &.dragging {
        cursor: grabbing; // 拖拽过程中的手型
        border-style: solid; // 拖拽时边框变实线
        opacity: 0.8; // 拖拽时稍微透明
    }

    .draggable-image {
        // max-width: 100px; // 限制图片大小
        // max-height: 100px;
        object-fit: contain;
        pointer-events: none; // 防止图片干扰拖拽事件
    }
    span {
        // 如果是文字
        font-size: 14px;
        color: #333;
        pointer-events: none;
    }
    /* 可选的拖拽指示器 (例如右下角小图标) */
    // .drag-handle-indicator { ... }
}

/* --- 确认对话框样式 --- */
.confirmation-dialog {
    .confirmation-message {
        margin-bottom: 15px;
    }
    .cost-info {
        font-size: 14px;
        color: #666;
        margin-bottom: 10px;
    }
    .payment-options {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    .payment-option {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 14px;
        .el-radio {
            margin-right: 0; // 移除 Element Plus radio 默认右边距
        }
        .account-balance {
            color: #999;
        }
    }
    .dialog-footer {
        display: flex;
        justify-content: center; // 按钮居中
        gap: 15px; // 按钮间距
    }
}
</style>
